<template>
  <div class="main-header">
    <div class="title-wrapper">
      <div class="back-btn" @click="() => $router.go(-1)">
        <el-icon style="color: white; margin-right: 5px" size="20"><Back /></el-icon>
        <div style="width: 50px">返回</div>
      </div>
      <div class="main-title">东软环保监督系统数据大屏</div>
    </div>
    <div class="main-time">{{ currentTime }}</div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Back } from '@element-plus/icons-vue'

let currentTime = ref('')

onMounted(() => {
  const timer = setInterval(() => {
    const now = new Date()
    const year = String(now.getFullYear()).slice(-4) // 获取后两位年份
    const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1并补零
    const day = String(now.getDate()).padStart(2, '0')
    const hours = String(now.getHours()).padStart(2, '0')
    const minutes = String(now.getMinutes()).padStart(2, '0')
    const seconds = String(now.getSeconds()).padStart(2, '0')

    currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }, 1000)

  // 清理定时器，避免内存泄漏
  onUnmounted(() => {
    clearInterval(timer)
  })
})
</script>
<style scoped lang="scss">
@font-face {
  font-family: electronicFont;
  src: url(../../assets/font/DS-Digital/DS-DIGIT-4.ttf);
}
.main-header {
  height: 70px;
  width: 100%;
  margin-top: 10px;
  padding-bottom: 10px;
  .title-wrapper {
    display: flex;
    padding-top: 10px; /* 调整上边距以增加间距 */
    color: white;
    gap: 10px; /* 在返回按钮和标题之间添加间距 */

    .back-btn {
      display: flex;
      font-weight: bold;
      font-size: 16px;
      margin-left: 10px;
    }
    .main-title {
      width: 100%;
      font-size: 32px;
      color: rgb(96 165 250);
      font-weight: bold;
      margin-left: 430px;
    }
  }
  .main-time {
    font-size: 30px;
    color: rgb(96 165 250);
    text-align: right;
    margin-right: 20px;
    font-family: electronicFont, sans-serif;
    font-weight: bold;
  }
}
</style>
